<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入本地的css样式-->
    <link rel="stylesheet" type="text/css" href="css/img_class.css">
    <link rel="stylesheet" type="text/css" href="css/button_class.css">
    <link rel="stylesheet" type="text/css" href="css/text_class.css">
    <link rel="stylesheet" type="text/css" href="css/div_class.css">
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="css/zui.min.css">
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="javascript/jquery-3.4.1.min.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="javascript/zui.min.js"></script>
    <!--引入本地func,js-->
    <script src="javascript/style.js"> </script>
    <script src="javascript/event.js"> </script>
    <script src="javascript/setdata.js"> </script>
    <!--引入数据表格插件js-->
    <script src="javascript/zui.datagrid.min.js"></script>
    <!--引入数据表格css-->
    <link rel="stylesheet" type="text/css" href="css/zui.datagrid.min.css">
    
</head>
<!--body关闭x,y滚动条-->
<body style="overflow-x:hidden;overflow-y:hidden">
  <!--网页背景样式web_bg,就是一张动图-->
  <div class="web_bg"></div>
  <!--网页大标题:人员管理系统-->
  <div id="logobox" class="logobox">
    <span id="logo_text" class="logo_text">人员管理系统</span>
  </div>

  <!--导航栏，在此直接用于排序-->
  <nav class="navbar navbar-inverse" role="navigation">
    <ul class="nav navbar-nav nav-justified">
      <li><a href="#id">按照学号排序</a></li>
      <li><a href="#name">按姓名排序</a></li>
      <li class="active"><a href="#grade">按成绩排序</a></li>
    </ul>
  </nav>

  <!--ZUI的数据表格-->
  <div id="form_box">
    <f id="form" class="datagrid" data-ride="datagrid"></f>
  </div>

  <!--翻页按钮组，样式模板在里面注释-->
  <div id="paper_group" class="pager">
    <!--active表示被选中，即当前页，会显示蓝色，加入disable可以取消这种样式-->
    <!-- 
        <li class="active disabled">
            <a title="第 1 页" class="pager-item" data-page="1" href="#page=1">1</a>
        </li>
    -->
  </div>

  <!--内嵌网页，用于模拟信息卡片-->
  <iframe id="card" src="sub_html/information.html" width="400" height="500" scrolling="no" frameborder="no">

</body>
</html>